import { defineStore } from "pinia";
import { computed, reactive } from "vue";
import type { IList, TItem } from "./type";
import useCounterStore from "../counter";

const useTodoListStore = defineStore("todoList", () => {
  const list = reactive<IList>({
    items: [
      {
        text: "学习 Pinia",
        isCompleted: true,
      },
      {
        text: "打羽毛球",
        isCompleted: false,
      },
      {
        text: "玩游戏",
        isCompleted: true,
      },
    ],
    counter: 100,
  });

  const counterStore = useCounterStore(); // store创建不能放在函数外
  const doubleCounter = computed(() => list.counter * 2);
  const otherCounter = computed(() => counterStore.doublueCount * 3);

  const addItem = (newItem: TItem) => {
    list.items.unshift(newItem);
  };

  const changeCompleteStatus = (i: number) => {
    list.items[i].isCompleted = !list.items[i].isCompleted;
  };

  const deleteItem = (i: number) => {
    list.items.splice(i, 1);
  };

  return {
    doubleCounter,
    otherCounter,
    list,
    addItem,
    changeCompleteStatus,
    deleteItem,
  };
});

export default useTodoListStore;
